<template>
    <div class="component-city">
        <input class='component-city__input item' type="text" placeholder="请选择城市" @click='showCity' :value="cityName" readonly>
        <ul class='component-city__list'>
            <li :data-val="prov.name" v-for='prov in cityList'>
                <span>{{ prov.name }}</span>
                <ul>
                    <li :data-val="city.city_name" v-for='city in prov.info'>{{ city.city_name }}</li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
    import '../libs/mobiscroll/css/mobiscroll.min.css'
    import '../libs/mobiscroll/js/mobiscroll.js'
    import '../libs/mobiscroll/js/mobiscroll.treelist.js'
    import '../libs/mobiscroll/js/i18n/mobiscroll.i18n.zh.js'
    import loading from '../components/Loading.vue'
    import cityList from '../libs/city/city.js'

    export default {
        components:{ loading },
        props:{
            selectCity:{
                type: String,
                default:'杭州'
            },
            onSelect:{
                type: Function,
                default() {}
            }
        },
        data() {
            return {
                cityList:cityList,
                citySelect:[],
                cityInst:{}
            }
        },
        computed:{
            cityName(){
                if(this.citySelect.length){
                    return this.citySelect[1]
                }
                return this.selectCity
            },
            defaultCity(){
                let info = this.cityAllInfo(this.selectCity)

                return [info.provName,info.cityName]
            }
        },
        methods:{
            cityAllInfo(cityName){
                let returnEach = false
                let cityId
                let provId
                let provName
                _.each(cityList,item => {
                    if(returnEach) return false
                    _.each(item.info,subItem => {
                        if(subItem.city_name == cityName){
                            cityId = subItem.city_id
                            provId = subItem.prov_id
                            provName = subItem.prov_name
                            returnEach = true
                            return false
                        }
                    })
                })
                return {
                    cityId:cityId,
                    cityName:cityName,
                    provId:provId,
                    provName:provName,
                }
            },
            showCity(){
                this.cityInst.show()
            },
        },
        mounted(){
            let self = this
            this.$nextTick(()=>{
                this.cityInst = mobiscroll.treelist('.component-city__list', {
                    theme: 'mobiscroll',
                    lang: 'zh',
                    display: 'bottom',
                    showInput:false,
                    defaultValue:this.defaultCity,
                    circular:[false,false],
                    width:[250,250],
                    onSet(event, inst) {
                        self.citySelect = inst.getArrayVal()
                        self.$emit('set',self.cityAllInfo(self.cityName))
                    },
                });
                // this.cityInst = $('.component-city__list').mobiscroll('getInst')
                // this.cityInst.show()
            })
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    .component-city{
        position: relative;
        width: 100%;
    }
    .component-city__loading{
        position: absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    .component-city__input{
        display: block;
        width: 100%;
    }
    .component-city__list{
        display:none;
    }
</style>


